<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>服务器运行状况监测</title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            var pie;
            var line;
            var area;
            $(function() {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
                Highcharts.theme = {colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], chart: {backgroundColor: {linearGradient: [0, 0, 250, 500], stops: [[0, 'rgb(48, 96, 48)'], [1, 'rgb(0, 0, 0)']]}, borderColor: '#000000', borderWidth: 2, className: 'dark-container', plotBackgroundColor: 'rgba(255, 255, 255, .1)', plotBorderColor: '#CCCCCC', plotBorderWidth: 1}, title: {style: {color: '#C0C0C0', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'}}, subtitle: {style: {color: '#666666', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'}}, xAxis: {gridLineColor: '#333333', gridLineWidth: 1, labels: {style: {color: '#A0A0A0'}}, lineColor: '#A0A0A0', tickColor: '#A0A0A0', title: {style: {color: '#CCC', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}}, yAxis: {gridLineColor: '#333333', labels: {style: {color: '#A0A0A0'}}, lineColor: '#A0A0A0', minorTickInterval: null, tickColor: '#A0A0A0', tickWidth: 1, title: {style: {color: '#CCC', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif'}}}, tooltip: {backgroundColor: 'rgba(0, 0, 0, 0.75)', style: {color: '#F0F0F0'}}, toolbar: {itemStyle: {color: 'silver'}}, plotOptions: {line: {dataLabels: {color: '#CCC'}, marker: {lineColor: '#333'}}, spline: {marker: {lineColor: '#333'}}, scatter: {marker: {lineColor: '#333'}}, candlestick: {lineColor: 'white'}}, legend: {itemStyle: {font: '9pt Trebuchet MS, Verdana, sans-serif', color: '#A0A0A0'}, itemHoverStyle: {color: '#FFF'}, itemHiddenStyle: {color: '#444'}}, credits: {style: {color: '#666'}}, labels: {style: {color: '#CCC'}}, navigation: {buttonOptions: {symbolStroke: '#DDDDDD', hoverSymbolStroke: '#FFFFFF', theme: {fill: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.4, '#606060'], [0.6, '#333333']]}, stroke: '#000000'}}}, // scroll charts 
                    rangeSelector: {buttonTheme: {fill: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.4, '#888'], [0.6, '#555']]}, stroke: '#000000', style: {color: '#CCC', fontWeight: 'bold'}, states: {hover: {fill: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.4, '#BBB'], [0.6, '#888']]}, stroke: '#000000', style: {color: 'white'}}, select: {fill: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.1, '#000'], [0.3, '#333']]}, stroke: '#000000', style: {color: 'yellow'}}}}, inputStyle: {backgroundColor: '#333', color: 'silver'}, labelStyle: {color: 'silver'}}, navigator: {handles: {backgroundColor: '#666', borderColor: '#AAA'}, outlineColor: '#CCC', maskFill: 'rgba(16, 16, 16, 0.5)', series: {color: '#7798BF', lineColor: '#A6C7ED'}}, scrollbar: {barBackgroundColor: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.4, '#888'], [0.6, '#555']]}, barBorderColor: '#CCC', buttonArrowColor: '#CCC', buttonBackgroundColor: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0.4, '#888'], [0.6, '#555']]}, buttonBorderColor: '#CCC', rifleColor: '#FFF', trackBackgroundColor: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, stops: [[0, '#000'], [1, '#333']]}, trackBorderColor: '#666'}, // special colors for some of the legend
                    BackgroundColor: 'rgba(0, 0, 0, 0.5)', background2: 'rgb(35, 35, 70)', dataLabelsColor: '#444', textColor: '#C0C0C0', maskColor: 'rgba(255,255,255,0.3)'}; // Apply the theme 
                var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
                pie = {
                    chart: {plotBackgroundColor: null, plotShadow: true},
                    title: {text: '硬盘使用情况'},
                    tooltip: {pointFormat: '<b>{point.percentage:.1f}%</b>'},
                    plotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},
                    credits: {enabled: false},
                    series: [{
                            type: 'pie',
                            data: [
                                ['use', 45.0],
                                ['free', 26.8],
                            ]
                        }]
                };
                line = {
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg,
                        events: {
                            load: function() {
                                var series = this.series[0];
                                var series1 = this.series[1];
                                setInterval(function() {
                                    var x = (new Date()).getTime(), // current time
                                            y = Math.random();
                                    z = Math.random();
                                    series.addPoint([x, y], false, true);
                                    series1.addPoint([x, z], true, true);
                                }, 1000);
                            }
                        }
                    },
                    credits: {enabled: false},
                    title: {text: ''},
                    xAxis: {type: 'datetime', tickPixelInterval: 150},
                    yAxis: {title: {text: '服务器负载情况实时监测'}, },
                    plotOptions: {spline: {marker: {enabled: false}}},
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.series.name + ' </b> ' + Highcharts.dateFormat('%H:%M:%S', this.x) + ' ' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    series: [{
                            name: 'Random data1',
                            data: (function() {

                                var data = [],
                                        time = (new Date()).getTime(),
                                        i;
                                for (i = -59; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,
                                        y: null
                                    });
                                }
                                return data;
                            })()
                        },
                        {
                            name: 'Random data2',
                            data: (function() {
                                var data = [],
                                        time = (new Date()).getTime(),
                                        i;
                                for (i = -59; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,
                                        y: null
                                    });
                                }
                                return data;
                            })()
                        }
                    ]
                }

                area = {
                    chart: {
                        type: 'area',
                        animation: Highcharts.svg,
            
                        events: {
                            load: function() {
                                var series = this.series[0];
                                var series1 = this.series[1];
                                setInterval(function() {

                                    $.getJSON("info/mem", function(data) {

                                        var x = (new Date()).getTime();
                                        var y = data.all;
                                        var z = data.used;
                                        series.addPoint([x, y], false, true);
                                        series1.addPoint([x, z], true, true);
                                    });
                                }, 1000);
                            }
                        }
                    },
                    credits: {enabled: false},
                    title: {text: ''},
                    xAxis: {type: 'datetime', tickPixelInterval: 150},
                    yAxis: {title: {text: '服务器内存使用情况实时监测'},max: 8000 },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.series.name + '</b>' + Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    plotOptions: {area: {marker: {enabled: false}}},
                    series: [{
                            name: '所有内存',
                            data: (function() {

                                var data = [],
                                        time = (new Date()).getTime(),
                                        i;
                                for (i = -419; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,
                                        y: null
                                    });
                                }
                                return data;
                            })()
                        },
                        {
                            name: '已使用内存',
                            data: (function() {
                                var data = [],
                                        time = (new Date()).getTime(),
                                        i;
                                for (i = -419; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,
                                        y: null
                                    });
                                }
                                return data;
                            })()
                        }
                    ]
                }

                $.getJSON('info/disk', function(data) {
                    pie.title.text = '/root 分区使用情况';
                    pie.series[0].data[0].y = data.root.used;
                    pie.series[0].data[1].y = data.root.free;
                    $('#container5').highcharts(pie);
                    pie.title.text = '/data 分区使用情况';
                    pie.series[0].data[0].y = data.data.used;
                    pie.series[0].data[1].y = data.data.free;
                });

                $('#container6').highcharts(pie);
                $('#container0').highcharts(line)
                $('#container1').highcharts(area)
            });</script>
    </head>
    <body style="background:#000">
        <script src="js/highcharts/highcharts.js"></script>
        <div id="container0" style=" height:350px;"></div>
        <div id="container1" style=" height: 350px;"></div>
        <div id="container5" style="width: 50%; height: 230px;  margin: 0 auto; float:left"></div>
        <div id="container6" style="width: 50%; height: 230px;  margin: 0 auto; float:left"></div>
    </body>
</html>
